
<!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>管理员面板 - 智能医疗系统</title>
        <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
        <!-- Vue.js -->
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
        <!-- 使用 BootCDN（国内加速） -->
        <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.6.5/axios.min.js"></script>
    </head>
    <body class="bg-light">
    <div id="app" class="container mt-5">
        <h2 class="text-center mb-4">管理员面板</h2>
        <div class="mb-3 text-end">
            <a href="/logout" class="btn btn-secondary">注销</a>
        </div>

        <div class="card mb-4">
            <div class="card-header">医生列表</div>
            <div class="card-body">
                <table class="table">
                    <tr v-for="doc in doctors" :key="doc.id">
                        <td>{{ doc.name }}</td>
                        <td>{{ doc.department.name }}</td>
                        <td>
                            <button @click="loadSchedules(doc.id)"
                                    class="btn btn-info btn-sm">
                                查看排班
                            </button>
                        </td>
                    </tr>
                </table>
            </div>
        </div>

        <!-- 排班详情弹窗 -->
        <div v-if="selectedDoctor" class="modal" :class="{show: showSchedules}">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5>{{ selectedDoctor.name }}的排班</h5>
                        <button @click="showSchedules = false" class="btn-close"></button>
                    </div>
                    <div v-for="s in schedules" :key="s.id">
                        日期: {{ s.date }} 星期{{ s.dayOfWeek }} 时段: {{ s.timeSlot }}
                    </div>
                </div>
            </div>
        </div>


        <!-- 新增医生部分 -->
        <div class="card mb-4">
            <div class="card-header">新增医生</div>
            <div class="card-body">
                <form @submit.prevent="addDoctor">
                    <div class="mb-3">
                        <input type="text" v-model="newDoctor.username" class="form-control" placeholder="医生账号（用户名）" required>
                    </div>
                    <div class="mb-3">
                        <input type="password" v-model="newDoctor.password" class="form-control" placeholder="初始密码" required>
                    </div>
                    <div class="mb-3">
                        <input type="text" v-model="newDoctor.name" class="form-control" placeholder="医生姓名" required>
                    </div>
                    <div class="mb-3">
                        <input type="text" v-model="newDoctor.specialty" class="form-control" placeholder="专长">
                    </div>
                    <div class="mb-3">
                        <label>请选择科室</label>
                        <select v-model="newDoctor.departmentId" class="form-select" required>
                            <option disabled value="">请选择科室</option>
                            <option v-for="dept in departments" :value="dept.id">{{ dept.name }}</option>
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary">新增医生</button>
                </form>
            </div>
        </div>

        <!-- 创建医生排班部分 -->
        <div class="card mb-4">
            <div class="card-header">创建医生排班</div>
            <div class="card-body">
                <!-- 科室选择 -->
                <div class="mb-3">
                    <label>请选择科室</label>
                    <select v-model="selectedDepartment" @change="fetchDoctorsByDepartment" class="form-select">
                        <option disabled value="">请选择科室</option>
                        <option v-for="dept in departments" :value="dept.id">{{ dept.name }}</option>
                    </select>
                </div>
                <!-- 医生选择：显示该科室下的医生姓名 -->
                <div class="mb-3">
                    <label>请选择医生</label>
                    <select v-model="newSchedule.doctorId" class="form-select" required>
                        <option disabled value="">请选择医生</option>
                        <option v-for="doc in doctors" :value="doc.id">{{ doc.name }}</option>
                    </select>
                </div>
                <!-- 排班创建部分新增 -->
                <div class="mb-3">
                    <label>选择日期</label>
                    <input type="date" v-model="newSchedule.date" class="form-control" required>
                </div>
                <!-- 星期选择 -->
                <div class="mb-3">
                    <label>请选择星期</label>
                    <select v-model="newSchedule.dayOfWeek" class="form-select" required>
                        <option disabled value="">请选择星期</option>
                        <option value="MON">周一</option>
                        <option value="TUE">周二</option>
                        <option value="WED">周三</option>
                        <option value="THU">周四</option>
                        <option value="FRI">周五</option>
                        <option value="SAT">周六</option>
                        <option value="SUN">周日</option>
                    </select>
                </div>
                <!-- 固定时段选择 -->
                <div class="mb-3">
                    <label>请选择时段</label>
                    <select v-model="newSchedule.timeSlot" class="form-select" required>
                        <option disabled value="">请选择时段</option>
                        <option value="08:00-09:40">08:00-09:40</option>
                        <option value="10:00-11:40">10:00-11:40</option>
                        <option value="14:00-15:40">14:00-15:40</option>
                        <option value="16:00-17:40">16:00-17:40</option>
                    </select>
                </div>
                <button @click="createSchedule" class="btn btn-success">创建排班</button>
            </div>
        </div>

        <!-- 排班列表展示 -->
        <div class="card">
            <div class="card-header">排班列表</div>
            <div class="card-body">
                <button @click="fetchSchedules" class="btn btn-info mb-3">刷新排班列表</button>
                <ul class="list-group">
                    <li class="list-group-item" v-for="sch in schedules" :key="sch.id">
                        <strong>ID:</strong> {{ sch.id }},
                        <strong>医生:</strong> {{ sch.doctor.user.username }} ({{ sch.doctor.name }}),
                        <strong>星期:</strong> {{ sch.dayOfWeek }},
                        <strong>时段:</strong> {{ sch.timeSlot }}
                    </li>
                </ul>
            </div>
        </div>

    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                departments: [],          // 科室列表
                selectedDepartment: "",   // 当前选中的科室ID，用于加载医生
                doctors: [],              // 当前科室下的医生列表
                schedules: [],            // 排班列表
                newDoctor: {
                    username: "",
                    password: "",
                    name: "",
                    specialty: "",
                    departmentId: ""
                },
                newSchedule: {
                    doctorId: "",   // 选择的医生ID
                    dayOfWeek: "",
                    timeSlot: ""
                }
            },
            methods: {
                // 获取所有科室
                fetchDepartments() {
                    axios.get('/admin/departments')
                        .then(response => {
                            this.departments = response.data;
                        })
                        .catch(error => console.error(error));
                },
                // 新增医生
                addDoctor() {
                    axios.post('/admin/doctors', {
                        user: { username: this.newDoctor.username, password: this.newDoctor.password },
                        name: this.newDoctor.name,
                        specialty: this.newDoctor.specialty,
                        department: { id: this.newDoctor.departmentId }
                    })
                        .then(response => {
                            alert("医生添加成功");
                            this.newDoctor = { username: "", password: "", name: "", specialty: "", departmentId: "" };
                        })
                        .catch(error => {
                            alert("医生添加失败：" + error.response.data);
                        });
                },
                // 根据选中的科室获取医生列表
                fetchDoctorsByDepartment() {
                    if (!this.selectedDepartment) {
                        this.doctors = [];
                        this.newSchedule.doctorId = "";
                        return;
                    }
                    axios.get('/admin/doctors/byDepartment', { params: { departmentId: this.selectedDepartment } })
                        .then(response => {
                            this.doctors = response.data;
                            this.newSchedule.doctorId = "";
                        })
                        .catch(error => console.error(error));
                },

                createSchedule() {
                   if (!this.newSchedule.date||!this.newSchedule.doctorId || !this.newSchedule.dayOfWeek || !this.newSchedule.timeSlot) {
                        alert("请填写完整信息");
                        return;
                    }
                    axios.post('/admin/schedules', {
                        date: this.newSchedule.date,
                        dayOfWeek: this.newSchedule.dayOfWeek,
                        timeSlot: this.newSchedule.timeSlot,
                        doctor: { id: this.newSchedule.doctorId }
                    })
                        .then(response => {
                            alert("排班创建成功");
                            this.fetchSchedules();
                            this.newSchedule = { date:"",doctorId: "", dayOfWeek: "", timeSlot: "" };
                        })
                        .catch(error => {
                            alert("排班创建失败：" + error.response.data);
                        });
                },
                // 获取排班列表
                fetchSchedules() {
                    axios.get('/admin/schedules')
                        .then(response => {
                            this.schedules = response.data;
                        })
                        .catch(error => console.error(error));
                }
            },
            mounted() {
                this.fetchDepartments();
                this.fetchSchedules();
            }
        });
    </script>
    </body>
    </html>
